import React, { useState } from 'react';
import Child from './child'
import List from './list'
import ReactDOM from 'react-dom';
// ref  字符串 函数  createRef
/* 
  ref   ref='qqq'   this.refs.qqq
        ref={el=>this.xxx=el}   this.xxx

        创造一个私有属性 xxx=React.createRef()
        ref={this.xxx}  this.xxx.current
  ref 可以获取组件 但是只能获取类组件  不能获取函数式组件    
    
*/
class App extends React.Component {
  state = {
    count: 100,
    list: [{ name: 111 }, { name: 222 }, { name: 333 }, { name: 444 }],

  }
  ttt = React.createRef()
  add = (n) => {
    this.setState({
      count: this.state.count + n
    })
    // console.log(this.refs.qqq)
    // console.log(this.qqq)
    // console.log(this.ttt.current)
    console.log(this.ccc)
  }
  remove = (item) => {
    console.log(item)
    this.setState({
      list: this.state.list.filter(v => v.name != item.name)
    })
  }
  render() {
    return <div className=''>
      父组件
      <Child ref={el => this.ccc = el} count123={this.state.count} onAdd={this.add} />
      <h2 ref='qqq'>------------------</h2>
      <h2 ref={ele => this.qqq = ele}>------------------</h2>
      <h2 ref={this.ttt}>------------------</h2>
      <List
        data={this.state.list}
        onRemove={this.remove}
        myrender={item => <h1>{item.name}</h1>}>
        <h1 qqq='header'>标题</h1>
        <h2 qqq='header'>副标题</h2>
        <h1 qqq='footer'>尾部</h1>
      </List>
    </div>;
  }
}

function App2() {
  let [state, setState] = useState({
    count: 100,
    list: [{ name: 111 }, { name: 222 }, { name: 333 }, { name: 444 }]
  })
  const add = () => { }
  const remove = (item) => {
    setState({
      ...state,
      list: state.list.filter(v => v.name != item.name)
    })
  }
  return <>
    父组件
    <Child count123={state.count} onAdd={add} />
    <h2>------------------</h2>
    <List
      data={state.list}
      onRemove={remove}
      myrender={item => <h1>{item.name}</h1>}>
      <h1 qqq='header'>标题</h1>
      <h2 qqq='header'>副标题</h2>
      <h1 qqq='footer'>尾部</h1>
    </List>
  </>
}
ReactDOM.render(<App />, document.getElementById('root'))